import { Tabs, SearchBar, Button } from 'antd-mobile'
import { FilterOutline, CalendarOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './index.less'

export default function OrdersPage() {
  const navigate = useNavigate()
  const isShopBound = false

  return (
    <div className="orders-page">
      <div className="orders-tabs">
        <Tabs defaultActiveKey="all">
          <Tabs.Tab title='全部订单' key='all' />
          <Tabs.Tab title='待下单' key='pending' />
          <Tabs.Tab title='已下单待发货' key='toShip' />
          <Tabs.Tab title='已发货' key='shipped' />
        </Tabs>
      </div>

      <div className="orders-filter">
        <div className="search-wrap">
          <SearchBar placeholder='请输入订单号' clearable={false} />
        </div>
        <div className="icons">
          <FilterOutline fontSize={18} />
          <CalendarOutline fontSize={18} />
        </div>
      </div>

      {isShopBound ? (
        <div className="orders-list">
          {/* 列表占位，将来接接口 */}
        </div>
      ) : (
        <div className="orders-empty">
          <div className="illus" />
          <div className="text">暂无店铺</div>
          <Button color='primary' className='bind-btn' onClick={() => navigate('/shops')}>立即绑定</Button>
        </div>
      )}

      <div className="orders-bottom-space" />
    </div>
  )
}
